<template>
  <div class="login">
    <van-nav-bar title="用户注册" left-arrow @click-left="$router.go(-1)" />
    <div class="container">
      <div class="title">
        <h3>手机号注册</h3>
      </div>

      <div class="form">
        <div class="form-item">
          <input class="inp" maxlength="11" placeholder="请输入手机号码" type="text" v-model="loginData.loginAccount">
        </div>
        <div class="form-item">
          <input class="inp" placeholder="请输入密码" type="password" v-model="loginData.password">
        </div>
        <!-- <div class="form-item">
          <input class="inp" placeholder="请再次输入密码" type="password">
        </div> -->
      </div>
      <div class="register">
        <p>已有账号？<span @click="goLogin">点击登录</span></p>
      </div>

      <div class="login-btn" @click="register">注册</div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import request from '@/utils/request'

export default {
  name: 'RegisterIndex',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
  // 这里存放数据
    return {
      loginData: {
        loginAccount: '',
        password: ''
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 注册
    async register () {
      await request({
        url: '/user-basic/register',
        method: 'post',
        data: this.loginData
      }).then(res => {
        const loginDto = res.data.data
        if (loginDto.isSuccess) {
          // 注册成功
          this.$notify({ type: 'success', message: loginDto.message })
          this.goLogin(this.loginData)
        } else {
          // 注册失败
          this.$notify({ type: 'danger', message: loginDto.message })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    goLogin (loginData) {
      this.$router.push({
        name: 'Login',
        params: {
          loginData
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.login {
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }
}
.container {
  padding: 49px 29px;

  .title {
    margin-bottom: 20px;
    h3 {
      font-size: 26px;
      font-weight: normal;
    }
  }

  .register {
    font-size: 14px;
    text-align: right;

    span {
        color: #4d36df;
    }
  }
  .form-item {
    border-bottom: 1px solid #f3f1f2;
    padding: 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    .inp {
      display: block;
      border: none;
      outline: none;
      height: 32px;
      font-size: 14px;
      flex: 1;
    }
  }

  .login-btn {
    width: 100%;
    height: 42px;
    margin-top: 39px;
    background: linear-gradient(90deg,#ecb53c,#ff9211);
    color: #fff;
    border-radius: 39px;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
